<script setup>
import { onMounted, ref, defineAsyncComponent } from "vue";

const chooseItem = ref(1);
const handleItem = (item) => {
  chooseItem.value = item.id;
};
const list = [
  {
    id: 1,
    name: "全屏插件",
    components: defineAsyncComponent({
      loader: () => import("./components/full.vue"),
    }),
  },
  {
    id: 2,
    name: "前端实现表格下载与上传",
    components: defineAsyncComponent({
      loader: () => import("./components/xlx.vue"),
    }),
  },
  {
    id: 3,
    name: "二维码生成",
    components: defineAsyncComponent({
      loader: () => import("./components/qrcode.vue"),
    }),
  },
  {
    id: 4,
    name: "自动滚动加载",
    components: defineAsyncComponent({
      loader: () => import("./components/scoll.vue"),
    }),
  },
  {
    id: 5,
    name: "分片上传",
    components: defineAsyncComponent({
      loader: () => import("./components/bigfile.vue"),
    }),
  },
  {
    id: 6,
    name: "一个小table",
    components: defineAsyncComponent({
      loader: () => import("./components/aTableDemo.vue"),
    }),
  },
  {
    id: 7,
    name: "手写tree",
    components: defineAsyncComponent({
      loader: () => import("./components/tree.vue"),
    }),
  },
  {
    id: 8,
    name: "jsx的树",
    components: defineAsyncComponent({
      loader: () => import("./components/tree.jsx"),
    }),
  },
  {
    id: 9,
    name: "meeting选择组件",
    components: defineAsyncComponent({
      loader: () => import("./components/demoForMeeting.vue"),
    }),
  },
  {
    id: 10,
    name: "另一种排版的meeting",
    components: defineAsyncComponent({
      loader: () => import("./components/meeetingVue2.vue"),
    }),
  },
  {
    id: 11,
    name: "文件上传",
    components: defineAsyncComponent({
      loader: () => import("./components/fileFromUrl.vue"),
    }),
  },
].reverse();
</script>

<template>
  <div class="menuc">
    <ul class="menu-left">
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="item.id == chooseItem ? 'active' : ''"
        @click="handleItem(item)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="body-right">
      <component
        :is="list.find((item) => item.id == chooseItem)?.components || ''"
      ></component>
    </div>
  </div>
</template>

<style scoped lang="scss">
.menuc {
  display: flex;
  height: 100%;
  .menu-left {
    width: 100px;
    margin-right: 20px;
    height: 100%;
    // overflow: auto;
    li {
      width: 100px;
      margin-bottom: 10px;
      border-radius: 4px;
      text-align: center;
      box-shadow: 2px 1px 6px 0px #b8bfd8;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
        background: rgb(113, 116, 168);
        color: #fff;
        transition: all 0.2s;
      }
    }
    .active {
      background: rgb(70, 74, 116);
      color: #fff;
    }
  }

  .body-right {
    box-shadow: 0px 2px 10px 1px #b8bfd8;
    border-radius: 4px;
    width: 100%;
    height: calc(100% - 50px);
    padding: 10px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      opacity: 0.2;
      background: #ccc;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: #e7e7e7;
    }
  }
}
</style>
